<template>
  <el-input v-if="readonly"
            readonly
            :value="valueText"></el-input>
  <el-select v-else
             autocomplete="off"
             :clearable="clearable"
             :disabled="disabled"
             filterable
             :loading="loading"
             :multiple="multiple"
             :placeholder="placeholder"
             @change="$emit('change',value)"
             v-model="value">
    <el-option v-for="opt in showOptions"
               :key="$get(opt,valueField)"
               :disabled="excludes.some(s => s === $get(opt,valueField))"
               :label="$get(opt,textField)"
               :value="$get(opt,valueField)">
      <slot :item="opt"></slot>
    </el-option>
  </el-select>
</template>

<script lang="ts">
  import { Component } from "@some21/vue-class-decorator";
  import { get } from "lodash";
  import SelectBase from "./SelectBase";

  @Component({
    name: "ju-select",
  })
  export default class extends SelectBase {
    options: any[] = [];
    loading = false;
    $get(obj: any, path: string | string[]) {
      if (typeof obj === "object") {
        return get(obj, path);
      } else {
        return obj;
      }
    }

    valueField = "value";
    textField = "text";

    get valueText() {
      if (this.multiple) {
        return this.options
          .filter(f => this.$get(f, this.valueField) === this.value)
          .map(m => this.$get(m, this.textField))
          .join("，");
      } else {
        return this.$get(
          this.options.find(f => this.$get(f, this.valueField) === this.value),
          this.textField
        );
      }
    }
    get showOptions() {
      if (this.isHideExclude) {
        return this.options.filter(f => !this.excludes.some(s => Number(s) === f[this.valueField]));
      }
      return this.options;
    }

    created() {
      this.loading = true;
      this.loadOptions()
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    }
    // eslint-disable-next-line
    async loadOptions() {}
  }
</script>

<style lang="scss" scoped>
</style>
